import 'package:flutter/material.dart';
import 'dart:developer' as developer;

///
///  主要是针对Form   FormField 等控件相关使用
///
///   https://api.flutter-io.cn/flutter/widgets/Form-class.html
///   https://api.flutter-io.cn/flutter/widgets/FormField-class.html
///
///
///
class FormPage extends StatefulWidget {
  @override
  State<FormPage> createState() => FormPageState();
}

class FormPageState extends State<FormPage> {
  //输入框控制器
  final TextEditingController _userController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  // 获取表单字段
  final GlobalKey _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Form 表单控件使用"),
      ),
      body: Center(
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 20.0),
                child: TextFormField(
                  autofocus: true,
                  controller: _userController,
                  decoration: InputDecoration(
                      hintText: "请输入用户名或者邮箱",
                      prefixIcon: Icon(Icons.person),
                      border: OutlineInputBorder()),
                  //验证
                  validator: (v) {
                    return v!.trim().isNotEmpty ? null : " 用户不能为空";
                  },
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 20.0),
                child: TextFormField(
                  autofocus: false,
                  controller: _passwordController,
                  obscureText: true,
                  decoration: InputDecoration(
                      labelText: "密码",
                      hintText: "请输入密码",
                      prefixIcon: Icon(Icons.lock),
                      border: OutlineInputBorder()),
                  //验证
                  validator: (v) {
                    return v!.trim().length > 5 ? null : " 密码不能小于6位";
                  },
                ),
              ),
              SizedBox(
                height: 30,
              ),
              Padding(
                padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 20.0),
                child: Container(
                  color: Colors.red,
                  padding: EdgeInsets.all(10),
                  child: ConstrainedBox(
                    constraints: BoxConstraints.expand(height: 50),
                    child: ElevatedButton(
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text("登录"),
                        ),
                        onPressed: () {
                          // 通过_formKey.currentState 获取FormState后，
                          // 调用validate()方法校验用户名密码是否合法，校验
                          // 通过后再提交数据。
                          if ((_formKey.currentState as FormState).validate()) {
                            //验证通过提交数据
                            developer.log("验证通过");
                          }
                        }),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(left: 8.0, right: 8.0, top: 20.0),
                child: ElevatedButton(
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Text("登录"),
                    ),
                    onPressed: () {
                      // 通过_formKey.currentState 获取FormState后，
                      // 调用validate()方法校验用户名密码是否合法，校验
                      // 通过后再提交数据。
                      if ((_formKey.currentState as FormState).validate()) {
                        //验证通过提交数据
                        developer.log("验证通过");
                      }
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
